<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div class="box" style="width:100%;height:400px"></div>
</body>

</html>
<script>
    let box = document.querySelector('.box')
    let obj = echarts.init(box)
    let option = {

        series: [{
            type: 'pie',
            data: [
                { name: '秦始皇', value: 160 },
                { name: '刘邦', value: 120 },
                { name: '李世民', value: 150 },
                { name: '毛泽东', value: 130 }],
            // 标签
            label: {
                // 是否显示标签
                show: true,
                // 标签显示位置
                position: 'outside',
                // 标签字体大小
                fontSize: 25,
                // 标签输出格式
                formatter: '{b}{d}%',
            },
            // 折线
            labelLine: {
                // 是否显示折线
                shoe: true,
                // 折线第一段长度
                length: 60,
                // 折线第二段长度
                length2: 60,

            },
            // 圆的半径
            radius: [140, 150],
            // 强调
            emphasis: {
                disabled: false,
                focus: 'self',
            }
        }],

    }
    obj.setOption(option)
</script>